﻿<div id="container" class="PageContainer">
    <hr />
    <h2 style="margin-left:36px;">Variable Groups<span style="font-size:14px;"> ({{state.variableGroups.length}})</span></h2>
    <img id="waitImage" src="images/wait.gif" ng-show="loading" class="waitImage waitImageTopGridPosition"/>
    <!-- ng-mousedown="$event.shiftKey && $event.preventDefault()" prevents IE from selecting other DOM elements on shift-click -->
    <div class="gridFull" ui-grid="state.gridVariableGroups" ui-grid-selection ui-grid-resize-columns ui-grid-draggable-rows
         ng-dblclick="editGroup()" ng-mousedown="$event.shiftKey && $event.preventDefault()"></div>
    <div style="margin-top: 12px; text-align: center;">
        <button class="btn btn-default" ng-click="addGroup();" ng-disabled="loading">Add</button>
        <button class="btn btn-default" ng-click="editGroup();" ng-disabled="loading || selectedGroups.length == 0">Edit</button>
        <button class="btn btn-default" ng-click="deleteGroup();" ng-disabled="loading || selectedGroups.length == 0">Delete</button>
        <button class="btn btn-default" ng-click="findKey();" ng-disabled="loading">Find...</button>
        <button class="btn btn-default" ng-click="refresh(true);" ng-disabled="loading">Refresh</button>
    </div>
</div>